<template>
  <view class="page no-data">
    <view>
      <image class="no-data-img" :src="icon" alt="" />
      <p>{{ content }}</p>
    </view>
  </view>
</template>
<script>
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import Icon from "@/asstes/images/icon/null.png";
export default defineComponent({
  name: "Empty",
  components: {},
  props: {
    text: {
      type: String,
      default: "暂无数据!",
    },
  },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      content: props.text,
      icon: Icon,
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.no-data {
  // width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 28rpx;

  view {
    // width: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
    align-items: center;
    color: #999;

  }

  .no-data-img {
    width: 328rpx;
    height: 328rpx;

  }
}
</style>
